<template>
    <div>
        <Form ref="form" :model="rolegpData" :label-width="100" style="height:30px">
            <Row :gutter="24" type="flex" justify="end">
                <Col v-bind="grid">
                    <FormItem label="角色组名称：">
                        <Input v-model="rolegpData.rolegpName" placeholder="请输入角色组名称"/>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="角色组编码：">
                        <Input v-model="rolegpData.rolegpCode" maxlength="20" placeholder="请输入角色组编码"/>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem>
                        <Button type="default" icon="md-search" style="margin-left:5px" @click="handleSubmit"></Button>&nbsp;&nbsp;
                        <Button type="default" icon="md-refresh" @click="handleReset"></Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Table
            ref="table"
            :columns="tableColumns"
            :data="list"
            :loading="loading"
            :size="tableSize"
            class="ivu-mt"
            @on-select="handleSelect"
            @on-select-cancel="handleSelectCancel"
            @on-select-all="handleSelectAll"
            @on-select-all-cancel="handleClearSelect">
            <template slot-scope="{ row }" slot="name">
                {{ row.rolegpName }}
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center" style="height: 200px">
            <Page
                :total="pageNation.total"
                :page-size-opts="pageSizeOpts"
                :current.sync="pageNation.pageNumber"
                show-total
                show-sizer
                show-elevator
                :page-size="pageNation.pageSize"
                @on-change="handleChangePage"
                @on-page-size-change="handleChangePageSize"
            />
        </div>
    </div>
</template>
<script>
import {cloneDeep} from "lodash";
export default {
    data() {
        return {
            grid: {
                xl: 8,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24
            },
            rolegpData: {
                id: '',
                rolegpName: '',
                rolegpCode: '',
                rolegpDescrib: ''
            },
            columns: [
                {type: 'selection', minWidth: 60, align: 'center', show: true},
                {title: '角色组名称', key: 'rolegpName', minWidth: 140, show: true},
                {title: '角色组编码', key: 'rolegpCode', minWidth: 140, show: true},
                {title: '角色组描述', key: 'rolegpDescrib', minWidth: 140, show: true}
            ],
            loading: false,
            list: [],
            tableSize: 'default',
            rolegpInfo: null, // 当前选中的角色组信息
            pageSizeOpts: [10, 30, 50, 100],
            pageNation: {total: 0, pageSize: 10, pageNumber: 1},
            selectedRolegpData: [],
            rolegpObject: null,
        }
    },
    props: {
        selectedRolegpIds: {
            default: () => {
                return []
            }
        }
    },
    computed: {
        // 动态设置列
        tableColumns() {
            const columns = [...this.columns];
            return columns.filter(item => item.show);
        },
        offset() {
            return (this.pageNation.pageNumber - 1) * this.pageNation.pageSize;
        }
    },
    methods: {
        getData() {
            if (this.loading) return;
            this.loading = true;
            // 下面的 params 是获取的表单查询参数
            this.pageNation.total = 0;
            this.list = [];
            let condition = "";
            const params = this.rolegpData;
            if (params.rolegpName != null && params.rolegpName != "") {
                condition+="rolegpName like '%"+params.rolegpName+"%'";
            }

            if (params.rolegpCode != null && params.rolegpCode != "") {
                condition+="rolegpCode like '%"+params.rolegpCode+"%'";
            }

            this.$api.RoleGroup.queryByPage(this.pageNation.pageNumber, this.pageNation.pageSize, {condition}).then(res => {
                let records = res.records;
                records.forEach(item => {
                    let ids = this.selectedRolegpIds.filter(id => id == item.id);
                    if (ids.length > 0) {
                        item._checked = true;
                    } else {
                        item._checked = false;
                    }
                })
                this.selectedRolegpData = cloneDeep(this.selectedRolegpIds);
                this.list = cloneDeep(records);
                this.pageNation.total = res.total;
                this.pageNation.pageNumber = res.pageNumber;
                this.pageNation.pageSize = res.pageSize;
            }).finally(() => {
                this.loading = false;
            })
        },
        handleSubmit() {
            this.getData();
        },
        handleReset() {
            this.rolegpData = {};
            this.getData();
        },
        // 刷新表格数据
        handleRefresh() {
            this.getData();
        },
        // 切换页码
        handleChangePage(page) {
            this.pageNation.pageNumber = page;
            this.getData();
        },
        // 切换每页条数
        handleChangePageSize(size) {
            this.pageNation.pageNumber = 1;
            this.pageNation.pageSize = size;
            this.getData();
        },
        // 选中一项，将数据添加至已选项中
        handleSelect(selection, row) {
            this.selectedRolegpData.push(row.id);
        },
        // 取消选中一项，将取消的数据从已选项中删除
        handleSelectCancel(selection, row) {
            const index = this.selectedRolegpData.findIndex(id => id === row.id);
            this.selectedRolegpData.splice(index, 1);
        },
        // 当前页全选时，判断已选数据是否存在，不存在则添加
        handleSelectAll(selection) {
            selection.forEach(item => {
                if (this.selectedRolegpData.findIndex(id => id === item.id) < 0) {
                    this.selectedRolegpData.push(item.id);
                }
            });
        },
        handleGetRolegpIds(ids) {
            this.selectedRolegpData.forEach(item => {
                ids.push(item.id);
            });
            return ids;
        },
        // 清空所有已选项
        handleClearSelect() {
            this.selectedRolegpData = [];
        }
    }
}
</script>
